<template>
  <div class="news-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <SkeletonLoader type="article" :show-image="true" />
    </div>

    <!-- 新闻内容 -->
    <div v-else>
      <!-- 新闻头部 -->
      <div class="news-header">
      <div class="header-container">
        <div class="news-meta wow fadeInUp">
          <span class="news-category">{{ newsDetail.category }}</span>
          <span class="news-date">{{ formatDate(newsDetail.publishDate) }}</span>
          <span class="news-views">{{ newsDetail.views }} 次浏览</span>
        </div>
        <h1 class="news-title wow fadeInUp" data-wow-delay="0.1s">
          {{ newsDetail.title }}
        </h1>
        <p class="news-subtitle wow fadeInUp" data-wow-delay="0.2s">
          {{ newsDetail.subtitle }}
        </p>
      </div>
    </div>

    <!-- 新闻内容 -->
    <div class="news-content">
      <div class="content-container">
        <article class="news-article">
          <!-- 新闻封面 -->
          <div class="news-cover wow fadeInUp" v-if="newsDetail.coverImage">
            <img :src="newsDetail.coverImage" :alt="newsDetail.title" />
            <div class="cover-caption" v-if="newsDetail.coverCaption">
              {{ newsDetail.coverCaption }}
            </div>
          </div>

          <!-- 新闻正文 -->
          <div class="news-body wow fadeInUp" data-wow-delay="0.3s">
            <div class="article-content" v-html="newsDetail.content"></div>
          </div>

          <!-- 新闻标签 -->
          <div class="news-tags wow fadeInUp" data-wow-delay="0.4s" v-if="newsDetail.tags && newsDetail.tags.length">
            <h4>相关标签</h4>
            <div class="tags-list">
              <span
                v-for="tag in newsDetail.tags"
                :key="tag"
                class="tag"
              >#{{ tag }}</span>
            </div>
          </div>

          <!-- 分享按钮 -->
          <div class="news-share wow fadeInUp" data-wow-delay="0.5s">
            <h4>分享文章</h4>
            <div class="share-buttons">
              <button class="share-btn wechat" @click="shareToWechat">
                <i class="glyphicon glyphicon-comment"></i>
                微信
              </button>
              <button class="share-btn weibo" @click="shareToWeibo">
                <i class="glyphicon glyphicon-flash"></i>
                微博
              </button>
              <button class="share-btn copy" @click="copyLink">
                <i class="glyphicon glyphicon-link"></i>
                复制链接
              </button>
            </div>
          </div>
        </article>

        <!-- 侧边栏 -->
        <aside class="news-sidebar">
          <!-- 相关新闻 -->
          <div class="sidebar-section wow fadeInUp" data-wow-delay="0.6s">
            <h3>相关新闻</h3>
            <div class="related-news">
              <div
                v-for="related in relatedNews"
                :key="related.id"
                class="related-item"
                @click="goToNews(related.id)"
              >
                <div class="related-image" v-if="related.thumbnail">
                  <img :src="related.thumbnail" :alt="related.title" />
                </div>
                <div class="related-content">
                  <h4>{{ related.title }}</h4>
                  <p class="related-date">{{ formatDate(related.publishDate) }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 热门新闻 -->
          <div class="sidebar-section wow fadeInUp" data-wow-delay="0.7s">
            <h3>热门新闻</h3>
            <div class="hot-news">
              <div
                v-for="(hot, index) in hotNews"
                :key="hot.id"
                class="hot-item"
                @click="goToNews(hot.id)"
              >
                <span class="hot-rank">{{ index + 1 }}</span>
                <div class="hot-content">
                  <h4>{{ hot.title }}</h4>
                  <p class="hot-views">{{ hot.views }} 浏览</p>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>

    <!-- 导航按钮 -->
    <div class="news-navigation">
      <div class="nav-container">
        <div class="nav-buttons wow fadeInUp">
          <router-link to="/newsinformation" class="btn-back">
            <i class="glyphicon glyphicon-arrow-left"></i>
            返回新闻列表
          </router-link>
          <div class="nav-actions">
            <button
              v-if="prevNews"
              @click="goToNews(prevNews.id)"
              class="btn-nav prev"
            >
              <i class="glyphicon glyphicon-chevron-left"></i>
              上一篇
            </button>
            <button
              v-if="nextNews"
              @click="goToNews(nextNews.id)"
              class="btn-nav next"
            >
              下一篇
              <i class="glyphicon glyphicon-chevron-right"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

      <!-- 复制成功提示 -->
      <div v-if="showCopyTip" class="copy-tip">
        链接已复制到剪贴板
      </div>
    </div>
  </div>
</template>

<script setup name="NewsDetail">
import WOW from 'wow.js'
import { onMounted, ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useSEO } from '@/composables/useSEO'
import { useLoading } from '@/composables/useLoading'
import SkeletonLoader from '@/components/SkeletonLoader.vue'

const route = useRoute()
const router = useRouter()
const showCopyTip = ref(false)

// SEO管理
const { setNewsSEO } = useSEO()

// 加载状态管理
const { loading, startLoading, stopLoading, withLoading } = useLoading('newsDetail')

// 新闻详情数据（实际项目中应该从API获取）
const newsDetail = ref({
  id: route.params.id || '001',
  title: '杭州玄鸽科技荣获"2024年度最佳创新企业"奖项',
  subtitle: '在科技创新大会上，我公司凭借在AI和大数据领域的杰出贡献获得表彰',
  category: '公司新闻',
  publishDate: '2024-03-15',
  views: 1253,
  coverImage: '/src/assets/img/news-cover.jpg',
  coverCaption: '颁奖典礼现场',
  content: `
    <p>3月15日，在杭州举办的"2024年度科技创新大会"上，杭州玄鸽科技有限公司荣获"年度最佳创新企业"奖项。这一殊荣充分体现了我公司在人工智能、大数据、云计算等前沿技术领域的卓越表现和创新成果。</p>

    <h3>创新成果获得认可</h3>
    <p>在过去的一年里，玄鸽科技持续深耕技术创新，推出了多项具有市场竞争力的产品和解决方案：</p>

    <ul>
      <li><strong>创业者之家平台</strong>：为创业者提供全方位的创业支持服务，包括商业计划书生成、市场分析、资源对接等功能</li>
      <li><strong>GuDB数据库引擎</strong>：轻量级嵌入式关系型数据库，在保持小体积的同时实现了卓越的性能表现</li>
      <li><strong>箱野盲盒商城</strong>：创新的盲盒电商平台，通过循环经济模式重新定义了盲盒经济</li>
    </ul>

    <h3>技术实力备受瞩目</h3>
    <p>评审委员会对玄鸽科技的技术实力给予了高度评价。我公司自主研发的GuDB数据库引擎，在仅有2MB的体积下，实现了高达100K QPS的性能表现，这一技术突破在业界引起了广泛关注。</p>

    <blockquote>
      "玄鸽科技在技术创新方面表现出色，特别是在数据库技术和平台化服务方面的突破，为行业发展注入了新的活力。"
      <cite>— 评审委员会主席 张教授</cite>
    </blockquote>

    <h3>未来发展展望</h3>
    <p>获得这一荣誉后，玄鸽科技将继续秉承"用科技创新驱动未来"的理念，加大技术研发投入，深化产学研合作，为客户提供更加优质的产品和服务。</p>

    <p>公司CEO表示："这个奖项是对我们团队努力的认可，也是对我们继续创新的激励。我们将继续在AI、大数据、云计算等领域深耕细作，为推动行业发展贡献更多力量。"</p>
  `,
  tags: ['科技创新', '企业荣誉', '人工智能', '大数据'],
  author: '企业宣传部',
  authorAvatar: '/src/assets/img/avatar.png'
})

// 相关新闻
const relatedNews = ref([
  {
    id: '002',
    title: '玄鸽科技完成A轮融资，继续领跑科技创新',
    publishDate: '2024-03-10',
    thumbnail: '/src/assets/img/news-thumb-1.jpg'
  },
  {
    id: '003',
    title: 'GuDB数据库引擎性能测试报告发布',
    publishDate: '2024-03-08',
    thumbnail: '/src/assets/img/news-thumb-2.jpg'
  },
  {
    id: '004',
    title: '创业者之家平台用户突破10万大关',
    publishDate: '2024-03-05',
    thumbnail: '/src/assets/img/news-thumb-3.jpg'
  }
])

// 热门新闻
const hotNews = ref([
  {
    id: '005',
    title: '2024年科技趋势展望：AI与大数据的融合发展',
    views: 3245
  },
  {
    id: '006',
    title: '数字化转型加速，企业如何把握机遇',
    views: 2891
  },
  {
    id: '007',
    title: '云计算市场分析：机遇与挑战并存',
    views: 2156
  }
])

// 上一篇和下一篇新闻
const prevNews = ref({
  id: '006',
  title: '上一篇新闻标题'
})

const nextNews = ref({
  id: '002',
  title: '下一篇新闻标题'
})

// 格式化日期
function formatDate(dateString) {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 跳转到新闻详情
function goToNews(newsId) {
  router.push(`/news/${newsId}`)
}

// 分享功能
function shareToWechat() {
  // 实际项目中应该集成微信分享SDK
  alert('微信分享功能待开发')
}

function shareToWeibo() {
  // 实际项目中应该集成微博分享SDK
  const url = window.location.href
  const title = newsDetail.value.title
  window.open(`https://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`)
}

function copyLink() {
  navigator.clipboard.writeText(window.location.href).then(() => {
    showCopyTip.value = true
    setTimeout(() => {
      showCopyTip.value = false
    }, 2000)
  })
}

// 加载新闻数据
const loadNewsData = async () => {
  return withLoading(async () => {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))

    // 实际项目中这里会是真实的API调用
    // const response = await fetch(`/api/news/${route.params.id}`)
    // newsDetail.value = await response.json()

    return newsDetail.value
  }, '正在加载新闻详情...')
}

// 监听路由参数变化
watch(() => route.params.id, async (newId) => {
  if (newId) {
    newsDetail.value.id = newId
    await loadNewsData()
    setNewsSEO(newsDetail.value)
  }
}, { immediate: true })

onMounted(async () => {
  // 加载新闻数据
  await loadNewsData()

  // 设置SEO
  setNewsSEO(newsDetail.value)

  // 初始化WOW动画
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
  })
  wow.init()
})
</script>

<style scoped>
/* 新闻详情页样式 - 苹果风格 */
.news-detail {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background: #ffffff;
  color: #1d1d1f;
  min-height: 100vh;
}

/* 新闻头部 */
.news-header {
  padding: 80px 0 60px;
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.news-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.news-meta span {
  font-size: 14px;
  color: #86868b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.news-category {
  background: rgba(0, 113, 227, 0.1);
  color: #0071e3 !important;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.news-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.news-subtitle {
  font-size: 19px;
  font-weight: 400;
  color: #515154;
  margin: 0;
  line-height: 1.42;
  max-width: 600px;
  margin: 0 auto;
}

/* 新闻内容 */
.news-content {
  padding: 80px 0;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}

.news-article {
  max-width: none;
}

/* 新闻封面 */
.news-cover {
  margin-bottom: 48px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.news-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.cover-caption {
  padding: 16px 20px;
  background: #f5f5f7;
  font-size: 14px;
  color: #86868b;
  text-align: center;
}

/* 新闻正文 */
.news-body {
  margin-bottom: 48px;
}

.article-content {
  font-size: 17px;
  line-height: 1.6;
  color: #1d1d1f;
}

.article-content h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 40px 0 20px 0;
  letter-spacing: -0.01em;
}

.article-content p {
  margin: 0 0 20px 0;
}

.article-content ul {
  margin: 20px 0;
  padding-left: 20px;
}

.article-content li {
  margin: 12px 0;
}

.article-content blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: #f5f5f7;
  border-left: 4px solid #0071e3;
  border-radius: 12px;
  font-style: italic;
}

.article-content cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: #86868b;
  font-style: normal;
}

/* 新闻标签 */
.news-tags {
  margin-bottom: 48px;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.news-tags h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px 0;
}

.tags-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag:hover {
  background: rgba(0, 113, 227, 0.15);
  transform: translateY(-1px);
}

/* 分享按钮 */
.news-share {
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.news-share h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px 0;
}

.share-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn.wechat {
  background: rgba(7, 193, 96, 0.1);
  color: #07c160;
}

.share-btn.weibo {
  background: rgba(230, 22, 45, 0.1);
  color: #e6162d;
}

.share-btn.copy {
  background: rgba(0, 113, 227, 0.1);
  color: #0071e3;
}

.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 侧边栏 */
.news-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-section {
  background: #f5f5f7;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
}

.sidebar-section h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 20px 0;
  letter-spacing: -0.01em;
}

/* 相关新闻 */
.related-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.related-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-content h4 {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-date {
  font-size: 12px;
  color: #86868b;
  margin: 0;
}

/* 热门新闻 */
.hot-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hot-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hot-rank {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0071e3, #005bb5);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.hot-content h4 {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hot-views {
  font-size: 12px;
  color: #86868b;
  margin: 0;
}

/* 导航按钮 */
.news-navigation {
  padding: 60px 0;
  background: #f5f5f7;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: #0071e3;
  color: #ffffff;
  border-radius: 980px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: #0077ed;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.nav-actions {
  display: flex;
  gap: 12px;
}

.btn-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #ffffff;
  color: #0071e3;
  border: 1px solid rgba(0, 113, 227, 0.2);
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-nav:hover {
  background: rgba(0, 113, 227, 0.05);
  border-color: #0071e3;
  transform: translateY(-1px);
}

/* 复制提示 */
.copy-tip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1000;
  animation: fadeInOut 2s ease;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .news-sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 768px) {
  .news-header {
    padding: 60px 0 40px;
  }

  .header-container {
    padding: 0 16px;
  }

  .news-meta {
    gap: 16px;
    margin-bottom: 24px;
  }

  .news-content {
    padding: 60px 0;
  }

  .content-container {
    padding: 0 16px;
    gap: 32px;
  }

  .article-content {
    font-size: 16px;
  }

  .article-content h3 {
    font-size: 20px;
    margin: 32px 0 16px 0;
  }

  .nav-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-actions {
    justify-content: space-between;
  }

  .btn-nav {
    flex: 1;
    justify-content: center;
  }
}
</style>